<script setup lang="ts">
import QuestionList from "@/views/activity/questionBank/QuestionList.vue";
import { deepClone } from "@/utils";

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const emits = defineEmits(["update:modelValue", "change"]);

const pager = ref({
    currentPage: 1,
    showCount: 5,
    totalResult: 0,
    pageSizes: [5, 10, 20, 40],
  }),
  showDialog = ref(false);

const tableRef = ref();

const questionType = {
  0: { label: "单选", tag: "" },
  1: { label: "多选", tag: "warning" },
};

const questionList = computed(() => {
  if (!props.modelValue || props.modelValue.length == 0) return [];
  let start = (pager.value.currentPage - 1) * pager.value.showCount;
  return props.modelValue.slice(start, start + pager.value.showCount);
});

const selectionRow = computed(() => {
  if (!props.modelValue || props.modelValue.length == 0) return [];
  return deepClone(props.modelValue);
});

// 添加题目
const addQuestion = () => {
  showDialog.value = true;
  if (tableRef.value) {
    nextTick(() => {
      tableRef.value.setSelect();
    });
  }
};

// 删除题目
const delQuestion = (row: any, index: number) => {
  ElMessageBox.confirm(`是否删除【${row.title}】`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    props.modelValue.splice(index, 1);
    emits("update:modelValue", props.modelValue);
  });
};

const handleSizeChange = (s: number) => {
  pager.value.showCount = s;
};
const handleCurrentChange = (page: number) => {
  pager.value.currentPage = page;
};

const onSubmit = () => {
  let select = tableRef.value.getSelect();
  emits("update:modelValue", select);
  emits("change", select);
  showDialog.value = false;
};
</script>
<template>
  <el-button
    type="primary"
    icon="plus"
    style="float: right; margin-bottom: 10px"
    @click="addQuestion"
    >添加题目</el-button
  >
  <el-table :data="questionList" style="width: 100%">
    <el-table-column prop="date" label="序号" align="center" min-width="80">
      <template #default="scope">
        {{ scope.$index + 1 + (pager.currentPage - 1) * pager.showCount }}
      </template>
    </el-table-column>
    <el-table-column
      prop="title"
      label="题目"
      align="center"
      show-overflow-tooltip
      min-width="180"
    />
    <el-table-column prop="address" label="答案类型" min-width="100">
      <template #default="scope">
        <el-tag :type="questionType[scope.row.type].tag">
          {{ questionType[scope.row.type].label }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="100" fixed="right">
      <template #default="scope">
        <el-button
          @click="delQuestion(scope.row, scope.$index)"
          type="primary"
          link
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <el-pagination
      v-model:currentPage="pager.currentPage"
      v-model:pageSize="pager.showCount"
      :page-sizes="pager.pageSizes"
      layout="total, sizes, prev, pager, next, jumper"
      :total="modelValue.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
  <Dialog
    v-model="showDialog"
    title="答题素材库"
    width="80%"
    @confirm="onSubmit"
  >
    <QuestionList ref="tableRef" :selection="selectionRow" mode="selector" />
  </Dialog>
</template>
<style lang="scss" scoped>
.page {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
</style>
